<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员权益 - 记账助手</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .member-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .member-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        
        .member-crown {
            font-size: 48px;
            margin-bottom: 15px;
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        
        .member-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }
        
        .member-subtitle {
            font-size: 16px;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }
        
        .member-status {
            margin-top: 15px;
            padding: 8px 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            display: inline-block;
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1;
        }
        
        .member-status.active {
            background: rgba(72, 187, 120, 0.2);
            border: 1px solid rgba(72, 187, 120, 0.3);
        }
        
        .member-status.expired {
            background: rgba(245, 101, 101, 0.2);
            border: 1px solid rgba(245, 101, 101, 0.3);
        }
        
        .member-status-text {
            font-size: 14px;
            font-weight: 500;
        }
        
        .member-expiry {
            font-size: 12px;
            opacity: 0.9;
            margin-top: 4px;
        }
        
        .benefits-container {
            padding: 20px;
        }
        
        .benefit-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .benefit-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }
        
        .benefit-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .benefit-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .benefit-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 15px;
            color: white;
        }
        
        .benefit-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            margin: 0;
        }
        
        .benefit-description {
            color: #718096;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 15px;
        }
        
        .benefit-features {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .benefit-features li {
            display: flex;
            align-items: center;
            padding: 8px 0;
            color: #4a5568;
            font-size: 14px;
        }
        
        .benefit-features li::before {
            content: '✓';
            color: #48bb78;
            font-weight: bold;
            margin-right: 10px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #f0fff4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        .upgrade-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 20px;
            border-radius: 20px;
            padding: 25px;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .upgrade-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: float 8s ease-in-out infinite reverse;
        }
        
        .upgrade-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
        }
        
        .upgrade-description {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        
        .upgrade-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        
        .upgrade-btn {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .upgrade-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }
        
        .upgrade-btn.primary {
            background: white;
            color: #667eea;
        }
        
        .upgrade-btn.primary:hover {
            background: #f7fafc;
            color: #5a67d8;
        }
        
        .back-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            z-index: 2;
        }
        
        .back-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }
        
        /* 会员价格展示区域样式 */
        .member-pricing-container {
            margin-top: 20px;
            padding: 0 10px;
        }
        
        .pricing-card {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            padding: 15px 10px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .pricing-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.25);
        }
        
        .pricing-card.featured {
            background: rgba(255, 255, 255, 0.25);
            border: 2px solid rgba(255, 255, 255, 0.4);
            transform: scale(1.05);
            z-index: 1;
        }
        
        .pricing-card.featured:hover {
            transform: scale(1.08) translateY(-5px);
        }
        
        .pricing-icon {
            font-size: 24px;
            margin-bottom: 5px;
        }
        
        .pricing-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .pricing-price {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 2px;
        }
        
        .pricing-original {
            font-size: 12px;
            opacity: 0.7;
            text-decoration: line-through;
        }
        
        .pricing-badge {
            position: absolute;
            top: 10px;
            right: -25px;
            background: #ff9800;
            color: white;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 25px;
            transform: rotate(45deg);
        }
        
        /* 倒计时样式 */
        .countdown-container {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 10px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .countdown-text {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .countdown-timer {
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 2px;
        }
        
        /* 会员权益对比表格样式 - 现代简约风格 */
        .comparison-container {
            padding: 20px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            margin: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
            position: relative;
        }
        
        .comparison-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #667eea, #764ba2);
        }
        
        .comparison-title {
            font-size: 20px;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 20px;
            text-align: center;
            position: relative;
        }
        
        .comparison-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 3px;
        }
        
        .comparison-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 14px;
            margin-top: 10px;
        }
        
        .comparison-table th,
        .comparison-table td {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid rgba(226, 232, 240, 0.5);
            transition: all 0.3s ease;
        }
        
        .comparison-table th {
            background: rgba(247, 250, 252, 0.5);
            font-weight: 600;
            color: #4a5568;
            position: relative;
        }
        
        .comparison-table th:not(:first-child) {
            border-left: 1px solid rgba(226, 232, 240, 0.3);
        }
        
        .comparison-table th:first-child {
            border-top-left-radius: 12px;
        }
        
        .comparison-table th:last-child {
            border-top-right-radius: 12px;
        }
        
        .comparison-table tr:last-child td:first-child {
            border-bottom-left-radius: 12px;
        }
        
        .comparison-table tr:last-child td:last-child {
            border-bottom-right-radius: 12px;
        }
        
        .comparison-table th:first-child,
        .comparison-table td:first-child {
            text-align: left;
            font-weight: 500;
            padding-left: 20px;
        }
        
        .comparison-table tr:hover td {
            background: rgba(247, 250, 252, 0.7);
        }
        
        /* 特殊列样式 */
        .comparison-table th:nth-child(4),
        .comparison-table td:nth-child(4) {
            background: rgba(102, 126, 234, 0.05);
        }
        
        /* 表头样式 */
        .comparison-table thead tr {
            height: 60px;
        }
        
        .comparison-table th:nth-child(2) {
            color: #718096;
        }
        
        .comparison-table th:nth-child(3) {
            color: #4a5568;
        }
        
        .comparison-table th:nth-child(4) {
            color: #5a67d8;
            font-weight: 700;
        }
        
        /* 图标样式 */
        .comparison-table .check,
        .comparison-table .cross {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            transition: all 0.3s ease;
            font-size: 14px;
        }
        
        .comparison-table .check {
            background: rgba(72, 187, 120, 0.1);
            color: #48bb78;
        }
        
        .comparison-table .cross {
            background: rgba(229, 62, 62, 0.1);
            color: #e53e3e;
        }
        
        .comparison-table .check:hover,
        .comparison-table .cross:hover {
            transform: scale(1.1);
        }
        
        .comparison-table .check.premium {
            background: rgba(128, 90, 213, 0.1);
            color: #805ad5;
            position: relative;
        }
        
        .comparison-table .check.premium::after {
            content: '✨';
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 10px;
            animation: sparkle 2s infinite;
        }
        
        @keyframes sparkle {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.2); }
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .comparison-table {
                font-size: 13px;
            }
            
            .comparison-table th,
            .comparison-table td {
                padding: 12px 8px;
            }
            
            .comparison-table th:first-child,
            .comparison-table td:first-child {
                padding-left: 12px;
            }
            
            .comparison-table .check,
            .comparison-table .cross {
                width: 24px;
                height: 24px;
                font-size: 12px;
            }
        }
        
        /* 添加表格行交替颜色 */
        .comparison-table tbody tr:nth-child(even) {
            background-color: rgba(247, 250, 252, 0.3);
        }
        
        /* 添加表格行悬停效果 */
        .comparison-table tbody tr {
            transition: transform 0.2s ease;
        }
        
        .comparison-table tbody tr:hover {
            transform: translateX(3px);
        }
        
        /* 添加功能名称前的小图标 */
        .feature-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 8px;
            text-align: center;
            font-size: 12px;
            opacity: 0.7;
        }
        
        /* 添加限制性功能的样式 */
        .comparison-table .limited {
            background: rgba(247, 220, 89, 0.1);
            color: #f0b400;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .comparison-table .limited:hover {
            transform: scale(1.05);
            background: rgba(247, 220, 89, 0.2);
        }
    </style>
</head>
<body>
    <div class="screen">
        <div class="app-container">
            <div class="member-header">
                <button class="back-btn" onclick="history.back()">
                    ←
                </button>
                <div class="member-crown">👑</div>
                <div class="member-title">会员权益</div>
                <div class="member-subtitle">享受专属特权，让记账更轻松</div>
                
                <!-- 会员价格展示区域 -->
                <div class="member-pricing-container">
                    <div class="row g-3 mt-3">
                        <div class="col-4">
                            <div class="pricing-card">
                                <div class="pricing-icon">⭐</div>
                                <div class="pricing-title">月度会员</div>
                                <div class="pricing-price">¥15</div>
                                <div class="pricing-original">原价 ¥25</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="pricing-card featured">
                                <div class="pricing-icon">👑</div>
                                <div class="pricing-title">年度会员</div>
                                <div class="pricing-price">¥98</div>
                                <div class="pricing-original">原价 ¥198</div>
                                <div class="pricing-badge">超值</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="pricing-card">
                                <div class="pricing-icon">💎</div>
                                <div class="pricing-title">终身会员</div>
                                <div class="pricing-price">¥298</div>
                                <div class="pricing-original">原价 ¥598</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 新人限时优惠倒计时 -->
                    <div class="countdown-container mt-3">
                        <div class="countdown-text">新人限时优惠倒计时</div>
                        <div class="countdown-timer" id="countdownTimer">
                            <span id="countdown-hours">23</span>:<span id="countdown-minutes">59</span>:<span id="countdown-seconds">59</span>
                        </div>
                    </div>
                </div>
                
                <div id="memberStatusContainer" style="display: none;">
                    <div class="member-status">
                        <div class="member-status-text">会员状态: <span id="memberStatusText">-</span></div>
                        <div class="member-expiry">到期时间: <span id="memberExpiryDate">-</span></div>
                    </div>
                </div>
            </div>
            
            <!-- 会员权益对比表格 -->
            <div class="comparison-container">
                <h3 class="comparison-title">会员权益对比</h3>
                <div class="table-responsive">
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>功能</th>
                                <th>普通用户</th>
                                <th>普通会员</th>
                                <th>终身会员</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="feature-icon">📝</span>基础记账</td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">📊</span>多维度数据分析</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">📈</span>消费趋势预测</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">💡</span>个性化理财建议</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">📄</span>导出详细报表</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">☁️</span>自动云端备份</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🔄</span>多设备数据同步</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🔙</span>历史数据恢复</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🔒</span>安全加密存储</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🎨</span>多种精美主题</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🔣</span>自定义分类图标</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🖌️</span>个性化界面布局</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">👑</span>专属会员标识</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check premium">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🎤</span>智能语音识别</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🤖</span>自动分类建议</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🔔</span>消费提醒功能</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">⚠️</span>预算超支警告</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">👨‍💼</span>专属客服支持</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🚀</span>新功能优先体验</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🎁</span>会员专属活动</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check premium">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🚫</span>无广告纯净体验</td>
                                <td><span class="cross">✗</span></td>
                                <td><span class="check">✓</span></td>
                                <td><span class="check">✓</span></td>
                            </tr>
                            <tr>
                                <td><span class="feature-icon">🤖</span>AI智能记账</td>
                                <td><span class="limited">每天1次</span></td>
                                <td><span class="check">无限制</span></td>
                                <td><span class="check">无限制</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="benefits-container">
                <div class="benefit-card">
                    <div class="benefit-header">
                        <div class="benefit-icon">📊</div>
                        <h3 class="benefit-title">高级统计分析</h3>
                    </div>
                    <div class="benefit-description">
                        获得更详细的财务分析报告，包括趋势预测、消费习惯分析等专业功能
                    </div>
                    <ul class="benefit-features">
                        <li>多维度数据分析</li>
                        <li>消费趋势预测</li>
                        <li>个性化理财建议</li>
                        <li>导出详细报表</li>
                    </ul>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-header">
                        <div class="benefit-icon">☁️</div>
                        <h3 class="benefit-title">云端同步备份</h3>
                    </div>
                    <div class="benefit-description">
                        数据自动云端备份，多设备同步，永不丢失重要财务记录
                    </div>
                    <ul class="benefit-features">
                        <li>自动云端备份</li>
                        <li>多设备数据同步</li>
                        <li>历史数据恢复</li>
                        <li>安全加密存储</li>
                    </ul>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-header">
                        <div class="benefit-icon">🎨</div>
                        <h3 class="benefit-title">个性化定制</h3>
                    </div>
                    <div class="benefit-description">
                        自定义主题、图标、分类，打造专属于你的记账体验
                    </div>
                    <ul class="benefit-features">
                        <li>多种精美主题</li>
                        <li>自定义分类图标</li>
                        <li>个性化界面布局</li>
                        <li>专属会员标识</li>
                    </ul>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-header">
                        <div class="benefit-icon">🤖</div>
                        <h3 class="benefit-title">智能记账助手</h3>
                    </div>
                    <div class="benefit-description">
                        AI智能识别消费场景，自动分类记账，让记账变得更加智能便捷
                    </div>
                    <ul class="benefit-features">
                        <li>智能语音识别</li>
                        <li>自动分类建议</li>
                        <li>消费提醒功能</li>
                        <li>预算超支警告</li>
                    </ul>
                </div>
                
                <div class="benefit-card">
                    <div class="benefit-header">
                        <div class="benefit-icon">🎁</div>
                        <h3 class="benefit-title">专属特权</h3>
                    </div>
                    <div class="benefit-description">
                        享受会员专属客服、优先体验新功能、专属活动等特权服务
                    </div>
                    <ul class="benefit-features">
                        <li>专属客服支持</li>
                        <li>新功能优先体验</li>
                        <li>会员专属活动</li>
                        <li>无广告纯净体验</li>
                    </ul>
                </div>
            </div>
            
            <div class="upgrade-section">
                <div class="upgrade-title">立即升级会员</div>
                <div class="upgrade-description">解锁全部功能，享受完整记账体验</div>
                <div class="upgrade-buttons">
                    <button class="upgrade-btn" onclick="location.href='member-redeem.html'">兑换码升级</button>
                    <button class="upgrade-btn primary" onclick="showUpgradeModal()">立即购买</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 购买会员模态框 -->
    <div class="modal fade" id="upgradeModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 20px; border: none;">
                <div class="modal-header" style="border: none; padding: 25px 25px 0;">
                    <h5 class="modal-title" style="font-weight: 700; color: #2d3748;">选择会员套餐</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" style="padding: 20px 25px 25px;">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="card" style="border: 2px solid #667eea; border-radius: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                                <div class="card-body text-center" style="padding: 20px;">
                                    <div style="font-size: 24px; margin-bottom: 10px;">👑</div>
                                    <h6 style="font-weight: 700; margin-bottom: 5px;">年度会员</h6>
                                    <div style="font-size: 24px; font-weight: 700; margin-bottom: 5px;">¥98</div>
                                    <div style="font-size: 12px; opacity: 0.8;">原价 ¥198，限时优惠</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="card" style="border: 1px solid #e2e8f0; border-radius: 16px;">
                                <div class="card-body text-center" style="padding: 15px;">
                                    <div style="font-size: 20px; margin-bottom: 8px;">💎</div>
                                    <h6 style="font-weight: 600; margin-bottom: 5px; color: #2d3748;">季度会员</h6>
                                    <div style="font-size: 18px; font-weight: 700; color: #667eea;">¥39</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="card" style="border: 1px solid #e2e8f0; border-radius: 16px;">
                                <div class="card-body text-center" style="padding: 15px;">
                                    <div style="font-size: 20px; margin-bottom: 8px;">⭐</div>
                                    <h6 style="font-weight: 600; margin-bottom: 5px; color: #2d3748;">月度会员</h6>
                                    <div style="font-size: 18px; font-weight: 700; color: #667eea;">¥15</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <button class="btn" style="width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 25px; padding: 12px; font-weight: 600;" onclick="processPurchase()">立即购买</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 检查会员状态
        function checkMemberStatus() {
            // 这里应该是从后端API获取会员状态的代码
            // 以下是模拟数据，实际使用时需要替换为真实的API调用
            const memberStatus = {
                isMember: true, // 是否是会员
                expiryDate: '2024-10-31 23:59:59' // 会员到期时间
            };
            
            updateMemberStatusDisplay(memberStatus);
        }
        
        // 更新会员状态显示
        function updateMemberStatusDisplay(status) {
            const container = document.getElementById('memberStatusContainer');
            const statusElement = document.getElementById('memberStatusText');
            const expiryElement = document.getElementById('memberExpiryDate');
            const statusBox = container.querySelector('.member-status');
            
            if (status.isMember) {
                const expiryDate = new Date(status.expiryDate);
                const now = new Date();
                
                statusBox.classList.add('active');
                statusElement.textContent = '有效';
                expiryElement.textContent = status.expiryDate.split(' ')[0];
                
                // 如果快到期（30天内），添加提示
                const daysUntilExpiry = Math.ceil((expiryDate - now) / (1000 * 60 * 60 * 24));
                if (daysUntilExpiry <= 30) {
                    expiryElement.textContent += ` (还剩${daysUntilExpiry}天)`;
                }
            } else {
                statusBox.classList.add('expired');
                statusElement.textContent = '已过期';
                expiryElement.textContent = '已失效';
            }
            
            container.style.display = 'block';
        }
        
        function showUpgradeModal() {
            const modal = new bootstrap.Modal(document.getElementById('upgradeModal'));
            modal.show();
        }
        
        function processPurchase() {
            // 模拟购买流程
            alert('购买功能开发中，敬请期待！');
        }
        
        // 倒计时功能
        function startCountdown() {
            // 设置倒计时结束时间（24小时后）
            const now = new Date();
            const endTime = new Date(now.getTime() + 24 * 60 * 60 * 1000);
            
            function updateCountdown() {
                const currentTime = new Date();
                const diff = endTime - currentTime;
                
                if (diff <= 0) {
                    // 倒计时结束，重置为新的24小时
                    const newEndTime = new Date(currentTime.getTime() + 24 * 60 * 60 * 1000);
                    endTime.setTime(newEndTime.getTime());
                }
                
                // 计算剩余时间
                const hours = Math.floor(diff / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
                
                // 更新显示
                document.getElementById('countdown-hours').textContent = hours.toString().padStart(2, '0');
                document.getElementById('countdown-minutes').textContent = minutes.toString().padStart(2, '0');
                document.getElementById('countdown-seconds').textContent = seconds.toString().padStart(2, '0');
            }
            
            // 立即更新一次
            updateCountdown();
            
            // 每秒更新一次
            return setInterval(updateCountdown, 1000);
        }
        
        // 页面加载动画和初始化
        $(document).ready(function() {
            $('.benefit-card').each(function(index) {
                $(this).css({
                    'opacity': '0',
                    'transform': 'translateY(20px)'
                }).delay(index * 100).animate({
                    'opacity': '1'
                }, 500).css('transform', 'translateY(0)');
            });
            
            // 检查会员状态
            checkMemberStatus();
            
            // 启动倒计时
            startCountdown();
        });
    </script>
</body>
</html>